<template> 
  <div> 
    <el-dialog 
    class="detail-dialog" 
    :visible.sync="isVisible" 
    :close-on-click-modal="false" 
    title="用户信息" 
    width="600px">
    <el-row :gutter="24">
      <el-col :span="12">用户名称：<span>{{detailData.userName}}</span></el-col>
      <el-col :span="10">所属角色：<span>{{detailData.roleName}}</span></el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">所属区域：<span>{{detailData.areaName}}</span></el-col>
      <el-col :span="10">所属单位：<span></span></el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">所属部门：<span></span></el-col>
      <el-col :span="10">姓名：<span>{{detailData.name}}</span></el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">身份证号：<span></span></el-col>
      <el-col :span="10">职务：<span></span></el-col>
    </el-row>
    <el-row :gutter="24"> 
      <el-col :span="12">联系电话：<span>{{detailData.mobile}}</span></el-col>
      <el-col :span="10">账号状态：<span>{{detailData.state==true?"正常":"锁定"}}</span></el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">创建时间：<span>{{detailData.createTime}}</span></el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col >数字证书Base64：<span>{{detailData.signCert}}</span></el-col>
    </el-row>
  </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 弹窗显示
    dialogVisible:{
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      detailData: {},
    }
  },
  computed:{
    isVisible:{
      get(){
        return this.dialogVisible;
      },
      set(){
        this.$emit("close");
        this.detailData = {};
      }
    }
  },
  methods:{
     // 重置值
    initDetailObj(){
      return {
        userName: "",
      }
    },
    // 详情传递值
    setDetailObj(val){
      console.log(val);
      this.detailData = {...val}
    }
  }
}
</script>

<style lang="scss" >
.detail-dialog{
  .el-dialog__header{
    padding: 15px 20px 15px;
    .el-dialog__title{
      color: #fff;
    }
    i{
      color: #fff;
    }
    background-color: #006ACC;
  }
    .el-row {
      margin-bottom: 12px;
      span {
        line-height: 16px;
      }
    }
}
</style>